.upload-background {
  background-color: #f5f1e6;
}

.upload {
  padding: 0 25rpx;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.upload-header {
  margin: 50rpx 0 50rpx;
  display: flex;
}

.upload-header-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-header-prompt {
  color: #000;
  font-size: 30rpx;
}

.upload-header-btn {
  padding: 15rpx 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  animation-name: shake-center;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: .5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
}

.upload-header-btn::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 4rpx solid #514d3c;
  transition: all .5s;
  animation: border-around 10s infinite linear;
}

/* 边框贪吃蛇动画 */
@keyframes border-around {

  0%,
  100% {
    clip-path: inset(0 0 100% 0);
  }

  25% {
    clip-path: inset(0 100% 0 0);
  }

  50% {
    clip-path: inset(100% 0 0 0);
  }

  75% {
    clip-path: inset(0 0 0 100%);
  }
}

/* 摇晃动画 */
@keyframes shake-center {
  0% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }

  10% {
    transform: rotate(8deg);
  }

  20% {
    transform: rotate(-10deg);
  }

  30% {
    transform: rotate(10deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(10deg);
  }

  60% {
    transform: rotate(-10deg);
  }

  70% {
    transform: rotate(10deg);
  }

  80% {
    transform: rotate(-8deg);
  }

  90% {
    transform: rotate(8deg);
  }

  100% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
}

.upload-header-btn>image {
  width: 150rpx;
  height: 40rpx;
}

.upload-header-btn-mark {
  width: 80rpx;
  height: 10rpx;
  margin-top: 15rpx;
  background-color: #483c37;
  border-radius: 5rpx;
}

.upload-header-img-box {
  width: 300rpx;
  height: 350rpx;
  margin: 10rpx 0 30rpx 0;
  background: #fff;
  border: 5rpx solid #c4b19e;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.upload-header-img-box>image {
  width: 100%;
  height: 100%;
  display: block;
}